// Color variables (appears count calculates by raw css)
@dialog_content_background: #ffffff; // Appears 10 times
@dialog_box_shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);

@dialog_box_default_font:@fontReact;
@dialog_box_title_font_size:21px;
@dialog_box_title_font_color:rgba(0,0,0,0.87);
@dialog_box_title_background_color:@white;
@dialog_box_title_font_weight:500;
@dialog_box_title_padding:24px 24px 10px 24px;
@dialog_box_title_close_button_display:none;

@dialog_box_content_padding: 10px 24px 24px 24px;
@dialog_box_content_font_size:16px;
@dialog_box_content_line_height:22px;
@dialog_box_content_font_weight:300;
@dialog_box_content_font_color:rgba(0,0,0,0.53);

@dialog_box_button_color:@teal-500;

@dialog_content_titles_tint: rgb(117, 128, 139);
@dialog_field_disabled_background: #eeeeee; // Appears 5 times
@dialog_fields_border_radius: 0; // Appears 5 times
@dialog_fields_border_width: 0 0 1px 0; // Appears 5 times
@dialog_fields_border_color: #aaaaaa; // Appears 5 times
@dialog_fields_height: 24px; // Appears 5 times


/*
DIALOG BOXES
*/
/*#upload_form, #createdir_form, #createfile_form, #rename_div*/
#all_forms
{
  background-color: @dialog_content_background;
}
#all_forms > div{display:none;}
#all_forms form{display:inline;}

#all_forms div.shadow_class
{display:block;}

div.shadow_class
{
  -moz-border-radius:5px;
  border-radius:5px;
}

.dialogBox {

  font-family: @dialog_box_default_font;
  -webkit-font-smoothing: antialiased;

  box-shadow:@dialog_box_shadow;
  display: none;
  font-size: 11px;
  left: 30%;
  min-width: 420px;
  padding: 0;
  position: absolute;
  top: 30%;
  z-index: 1048;

  .dialogTitle {
    background-color: @dialog_box_title_background_color;
    color: @dialog_box_title_font_color;
    padding: @dialog_box_title_padding;
    font-weight: @dialog_box_title_font_weight;
    cursor:move;
    span.ajxp_icon_span {
      display: @dialog_box_title_close_button_display;
      font-size: 15px;
      padding-right: 8px;
      padding-top: 2px;
    }
    span#modalCloseBtn {
      color: @dialog_box_title_font_color;
      display: @dialog_box_title_close_button_display;
      font-size: 15px;
      margin-top: 0;
      padding: 7px 12px;
    }
    span.string-only-title {
      display: inline-block;
      font-size: @dialog_box_title_font_size;
    }
  }

  .dialogContent {

    background-color: @dialog_content_background;
    font-size: @dialog_box_content_font_size;
    color: @dialog_box_content_font_color;
    padding: @dialog_box_content_padding;
    line-height: @dialog_box_content_line_height;
    padding-bottom: 52px  + 24px;

    border-top: 0;

    .dialogLegend {
      font-size: 13px;
      line-height: 16px;
    }

    .dialogContentMainTitle {
      /*border-bottom: 1px solid @dialog_content_titles_tint;*/
      color: @dialog_content_titles_tint;
      font-size: 20px;
      margin-bottom: 10px;
      padding-bottom: 0;
    }

    .dialogButtons {
      position:absolute;
      box-sizing: border-box;
      bottom: 0;
      left:0;
      right:0;
      height: 52px;
      padding: 8px;
      text-align: right;

      .dialogButton {
        font-family:@fontReact;
        font-weight: 500;
        font-size: 15px;
        color:@dialog_box_button_color;
        text-transform: uppercase;
        background-color: transparent;
        border: 0;
        border-radius: 2px;
        height: 32px;
        margin-left: 8px;
        padding: 2px 8px;
        transition: @bezier_transition;
        cursor: pointer;
        &:focus {
          background-color: lighten(@dialog_box_button_color, 63);
        }
        &:hover{
          background-color: lighten(@dialog_box_button_color, 58);
        }
      }

      fieldSet {
        input.dialogButton {
          background-color: transparent;
          border: 0;
          height: 32px;
          margin-left: 3px;
          padding: 2px 0;
          width: 32px;
          &:focus {
            background-color: transparent;
            border: 0;
          }
        }
      }

      .dialogButtonsCheckbox {
        float: left;
        margin-top: 9px;
        label {
          cursor: pointer;
        }
      }

      &.inlineEdition {
        input {
          box-shadow: none;
          height: 22px;
          margin-left: 6px;
          padding: 0;
        }
      }

    }



    form {
      display: inline;
      margin: 0;
    }
    .SF_label{
      text-transform: none;
      font-size: 12px;
      margin-bottom: -3px;
    }

    input[type="text"], input[type="password"] {
      box-sizing: border-box;
      width: 100%;
      height: @dialog_fields_height;
      border-radius: @dialog_fields_border_radius;
      border: solid @dialog_fields_border_color;
      border-width: @dialog_fields_border_width;
      margin-left: 0;
      margin-bottom: 8px;
      font-size: 16px;
      padding: 0 !important;
      &:focus {
        border-color: @dialog_box_button_color;
      }
      &:disabled {
        background: @dialog_field_disabled_background;
      }
    }
    input[type="checkbox"], input[type="radio"] {
      background: none;
      border-radius : 0;
      border:none;
      filter: none;
      height: auto;
      margin-right: 0;
      width: auto;
    }
    .react-mui-context .mui-enhanced-switch .mui-enhanced-switch-input{
      width: 100%;
      height: 100%;
    }

    select {
      border-radius: @dialog_fields_border_radius;
      background-color: @dialog_content_background;
      border: @dialog_fields_border;
      font-size: 13px;
      height: @dialog_fields_height;
      margin-left: 0;
      box-sizing: border-box;
      width: 100%;
      &:focus {
      }
    }
    select[multiple] {
      height: 66px !important;
    }
    option {
      &:disabled {
        background: @dialog_field_disabled_background;
      }
    }
    textarea {
      &:disabled {
        background: @dialog_field_disabled_background;
      }
    }
  }



  .dialogArrow {
    font-size: 16px;
    font-weight: bold;
  }


  /***
  Dialog inside dialog
  /***/
  div.dialogBox.css_boxshadow {
    background-color: white;
    border-radius: 4px !important;
    border: 0;
    left: 10px;
    min-width: 400px;
    top: 19%;
    width: 96%;
  }
  div.dialogBox.css_boxshadow>div {
    background-color: transparent;
  }

}


